<template>
  <view style="height: 100rpx;">
    <view class="commentFrame">
      <!-- 加强版的input输入框 -->
      <uni-easyinput ref="uipt" @confirm="goComment" suffixIcon="paperplane" v-model="replyContent"
        :placeholder="'回复：' + placeholder">
      </uni-easyinput>
    </view>
  </view>
</template>

<script>
  import {
    ref
  } from "vue"
  import {
    useStore
  } from 'vuex'
  import {
    getProvince,
    goLoginPage
  } from "../../utils/tools.js"
  import {
    store
  } from "../../uni_modules/uni-id-pages/common/store.js"
  const utilsObj = uniCloud.importObject("utilsObj", {
    customUI: true
  })
  const db = uniCloud.database()
  export default {
    name: "comment-frame",
    props: {
      commentObj: {
        type: Object,
        default: () => {
          return {}
        }
      },
      placeholder: {
        type: String,
        default: "评论点什么吧"
      },
      childState: {
        type: Boolean,
        default: false
      }
    },
    setup(prop, {
      emit
    }) {
      const vuex_store = useStore()
      const replyContent = ref('')
      // 回车或者点击发布触发
      const goComment = async () => {
        if (store.hasLogin) {
          if (replyContent.value.trim() == '') {
            uni.showToast({
              title: "评论内容为空~",
              icon: "none"
            })
            return
          }
          if (prop.childState) {
            replyContent.value = `@${prop.placeholder}: ${replyContent.value}`
            // console.log(prop.placeholder)
          }
          // 获取用户地址
          let province = await getProvince()
          console.log(province)
          db.collection("pyq_comment").add({
            "comment_content": replyContent.value,
            "replyTotal": 0,
            "province": province,
            ...prop.commentObj
          }).then(res => {
            // vuex是记录每次发布的状态 以便跟主页评论及时联动
            vuex_store.commit('reset_cellback_detail_comment')
            // 后台评论数加一
            utilsObj.operation("pyq_article", "comment_count", prop.commentObj.article_id, 1)
            vuex_store.commit('up_cellback_detail_comment', prop.commentObj)
            if (prop.childState) {
              // 加
              vuex_store.commit('reset_two_level_comment')
              vuex_store.commit('add_two_level_comment', prop.commentObj.reply_comment_id)
            }
            // 触发父组件重新获取数据
            emit("up_comment_data")
            replyContent.value = ''
          }).catch(err => {
            console.log(err)
          })
        } else {
          goLoginPage()
        }
      }
      return {
        replyContent,
        goComment
      }
    }
  }
</script>

<style lang="scss" scoped>
  .commentFrame {
    width: 100%;
    background: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
  }
</style>
